<template>
  <div>

  </div>
</template>

<script>

import {Marker, MultiPoint, Util} from 'maptalks';


export default {
  name: 'ctMapMultiMarker',
  components: {Util},
  props: {
    points: {
      type: Array,
      default: null,
    },

    listenEvents: {
      type: Array,
      default: null,
    },
    zIndex: {}
  },
  data: () => ({
    parentMap: null,
    markerArr: []
  }),
  created() {
  },
  mounted() {
    this.reRender()
  },
  methods: {
    reRender() {
      const vue = this;
      this.$nextTick(() => {
        const markers = [];
        const map = new Map()
        vue.points.forEach(function (point) {
          let userMarkerData = point
          let marker
          if (point.markerSymbol) {
            marker = new Marker([point.x, point.y], {
              symbol: point.markerSymbol
            });
          } else {
            marker = new Marker([point.x, point.y]);
          }
          marker.mpId = point.mpId
          marker.mpType = point.mpType
          // 合并 对象 属性
          Util.extend(marker, point)
          markers.push(marker);
          map.set(point.mpId, marker)
        })
        vue.markerArr = markers
        this.createMultiMarker(vue.markerArr, map);
      });
    },
    createMultiMarker(markers, map) {
      let _this = this
      const {firstLayer} = this.$parent
      const multiPoint = new MultiPoint(markers, {
        visible: true,
        editable: true,
        cursor: 'pointer',
        shadowBlur: 0,
        shadowColor: 'black',
        draggable: false,
        dragShadow: false, // display a shadow during dragging
        drawOnAxis: null, // force dragging stick on a axis, can be: x, y
        zIndex: _this.zIndex == null ? 0 : _this.zIndex
      }).addTo(firstLayer);
      if (this.symbol) {
        multiPoint.setSymbol(this.symbol);
      }
      // 监听事件
      if (_this.listenEvents) {
        let eventsOn = _this.listenEvents.toString().replaceAll(',', ' ')
        multiPoint.on(eventsOn, (param) => {
          let clickCoordinate = param.coordinate
          // 距离点击点最近的 marker 点的 坐标
          let findClosest = multiPoint.findClosest(clickCoordinate);
          //  地图 的 标准 multiPoint 对象
          let standardMultiPoint = param.target;
          let markerList = standardMultiPoint.getGeometries()
          for (let i = 0; i < markerList.length; i++) {
            let markerListElement = markerList[i];
            let coordinates = markerListElement.getCoordinates();
            if (coordinates.x === findClosest.x && coordinates.y === findClosest.y) {
              switch (param.type) {
                case 'click':
                  _this.$emit('click', markerListElement)
                  break
                case 'dblclick':
                  _this.$emit('dblClick', markerListElement)
                  break
                default:
                  break
              }
              break
            }
          }
        });
      }
      _this.$emit('multiMarkerCompleted', map)
      return multiPoint;
    },
    updateStyle() {
    },
  },
  watch: {
    points: {
      immediate: false,
      handler: function (v) {
        if (this.markerArr) {
          this.markerArr.forEach(function (value) {
            value.remove()
          })
          this.markerArr = []
        }
        this.reRender()
      },
    },
  },
};
</script>

